<template>
    <div class="tasklist">
        <div :class="{task:true, unfinished: !item.status }" v-for="(item,index) in tasklist" :key="index">
            <input :checked="item.status" type="checkbox" @click="change(item.id)">
            <span> {{item.name}} </span>
            <span @click="del(item.id)">删除</span>
        </div>
    </div>
</template>

<script setup>

    import { storeToRefs } from 'pinia'

    import {useTasklistStore} from '../stores/tasklist'

    //调用useTasklistStore方法 获取store对象
    var store = useTasklistStore()

    //解构store
    var {tasklist} = storeToRefs(store);

    var change = (id)=>{
    store.changeStatus(id);//调用仓库中的方法changeStatus,更改任务状态
    }

    var del  = (id)=>{
    store.deleteTask(id);//调用仓库中的方法deleteTask,删除任务
    }
</script>

<style scoped>
    .tasklist .task{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background-color: rgb(33, 146, 216);
        color: white;
        margin: 10px;
    }
    .tasklist .task.unfinished{
        background-color: red;
    }
</style>